<template>
  <div class="detail" style="border: 0px solid red">
    <div style="">
<!--      <img-->
<!--        src="../../../assets/image/shiyanshebeibanner.png"-->
<!--        style="width: 100%; height: auto"-->
<!--      />-->
    </div>
    <el-table :data="workList" border style="width: 100%"
      >
            <el-table-column
               align="center"
        prop="ldoTaskNo"
        label="任务单号"

      ></el-table-column>
            <el-table-column
               align="center"
        prop="labName"
        label="实验室"

      ></el-table-column>
            <el-table-column   align="center"
        prop="ldName"
        label="设备名称"
        width="100"
      ></el-table-column>
      <el-table-column label="设备图片" align="center" width="70">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px; border-radius: 10px"
            :src="scope.row.ldImageUrl"
            :lazy="true"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="ldoTitle"
        label="工作标题"
 align="center"
      ></el-table-column
      >s
      <el-table-column
        prop="ldoStartDate"
        label="使用开始时间"
        align="center"

      ></el-table-column>
      <el-table-column
        prop="ldoEndDate"
        align="center"
        label="使用结束时间"

      ></el-table-column>
      <el-table-column
       prop="ldoCompany"
        align="center"
        label="预约单位"

      >

      </el-table-column>
      <el-table-column
 prop="ldoName"
        align="center"
        label="预约人姓名"

      >
      </el-table-column>
      <el-table-column
 prop="ldoPhone"
        align="center"
        label="预约联系人电话"
        width="100"
      >
      </el-table-column>
      <el-table-column

        align="center"
        label="预约状态"

      >
              <template slot-scope="scope">
     <div><el-tag>{{scope.row.ldoStatus==0?'成功':'失败'}}</el-tag></div>
        </template>
      </el-table-column>
      <el-table-column

        align="center"
        label="记录状态"

      >
        <template slot-scope="scope">
          <div v-if="scope.row.status==0">
<el-tag>正常</el-tag>
          </div>
          <div v-else>
<el-tag type="success">非正常</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-bottom: 10px">
      <!-- <Pagination :total="total" :params="params"></Pagination>
    </div> -->
    <!-- <div> -->
      <!-- <Pagination :total="total" :params="params" @size-change="handleSizeChange"></Pagination> -->
      <el-pagination style="float:right" @current-change="handleSizeChange" background="true" :page-sizes="[8, 12, 20, 32]" :page-size="8" layout=" prev, pager, next,sizes,jumper" :total="total" hide-on-single-page="true">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import { orderlist } from "@/api/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 总条数
      total: 100,
      //  参数
      params: {
        pageNum: 1,
        pageSize: 8,
      },
      workList: [],
    };
  },
  methods: {

    getList() {

      orderlist().then((res) => {
          console.log(res)
        this.total = res.data.total;
        this.workList = res.data.rows;
      });
    },
    Gohome() {
      this.$router.push("home");
    },
    handleSizeChange(e) {
      this.params.pageNum = e;
      this.workList = [];
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>
.workList {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10px;
  margin-top: 10px;
  .ylkt1 {
    width: 25%;
    padding-left: 10px;
    .work {
      width: 100%;
      border: 1px solid #f3f3f3;
      .workImg {
        width: 100%;
        height: 200px;
      }
      .work_info {
        .workName {
          height: 60px;
          font-size: 16px;
          font-weight: bold;
          display: block;
          padding: 10px 10px;
          border-bottom: 1px solid #f3f3f3;
        }
        .workInfo {
          padding: 10px;
          span {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
          }
          span:nth-child(1) {
          }
        }
        .btns {
          padding: 10px;
          a {
            width: 100%;
            height: 40px;
            background-color: #429aff;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.detail {
}
.container {
  width: 100%;
  margin: 0 auto;
}
.title-tab {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 54px;
  cursor: pointer;
}
.red {
  color: red;
}
.zhengwen {
  width: 100%;
  background-color: white;
  padding: 60px;
  box-sizing: border-box;
}
p {
  text-indent: 2em;
  font-size: 16px;
  color: #333333;
  margin-top: 20px;
}
p:nth-child(1) {
  text-indent: 0;
}
h1 {
  text-align: center;
  font-size: 28px;
  color: #333333;
}
.first {
  text-align: center;
  font-size: 16px;
  color: #999999;
  margin-top: 28px;
  margin-bottom: 30px;
}
.daohang {
  margin: 20px 0;
}
.third {
  margin-right: 20px;
}
.jianjiebanner {
  background: url(../../../assets/image/shiyanshebeibanner.png);
}
.ylkt {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  background: rgba(242, 242, 242, 1);
}
.mb-20 {
  margin-bottom: 20px;
}
.picFocus {
  width: 100%;
  height: 120px;
}
.ylkt1 {
  width: 100%;
  padding-bottom: 14px;
}
.module-bgc {
  background-color: white;
}
.ylkt1Img-pic-box {
  width: 100%;
  height: 320px;
  overflow: hidden;
}
.ylkt1Img {
  width: 348px;
  height: 180px;
  margin-top: 10px;
  padding-left: 20px;
  margin-bottom: 8px;
  cursor: pointer;
}
.ylkt1List {
  margin-top: 9px;
  width: 96%;
}
.ylkt1List111:hover {
  background-color: #2a5caa;
  cursor: pointer;
  color: #ffffff;
  span {
    color: #ffffff;
  }
  .spanshebeiinfo {
    color: #ffffff;
  }
}
.spanshebei {
  border: 0px solid red;
  line-height: 60px;
  padding-left: 0px;
  padding-top: 20px;
  color: #444444;
  font-weight: bolder;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}

.spanshebeiinfo {
  border: 0px solid red;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  font-size: 14px;
  line-height: 25px;
  color: #999999;
  font-family: "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
</style>
